<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>鲜花</el-breadcrumb-item>
      <el-breadcrumb-item>浪漫满屋</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 详情具体区域 -->
    <div class="item">
      <div class="left">
        <div class="l_t">
          <img :src="imgurl" alt="">
        </div>
        <div class="l_b">
          <img src="../assets/det_bs.jpg" alt="">
          <img src="../assets/det_s.jpg" alt="">
        </div>
      </div>
      <div class="right">
        <p>{{dtitle}}</p>
        <hr>
        <div>
          <span>材料：</span>
          <span>{{cl}}</span>
        </div>
        <div>
          <span>包装：</span>
          <span>{{bz}}</span>
        </div>
        <div>
          <span>附送：</span>
          <span>下单填写留言，免费赠送贺卡  								</span>
        </div>
        <div>
          <span>配送：</span>
          <span>全国送货上门，市区免运费  								</span>
        </div>
        <div class="mt">
          <span>优惠券：</span>
          <span>暂无优惠券  								</span>
        </div>
        <div class="mb">
          <span>配送时间：</span>
          <input type="text" readonly :value="date()">
          <select name="" id="">
            <option value="1">不限时间</option>
            <option value="2">8:00-10:00</option>
            <option value="3">10:00-12:00</option>
            <option value="4">12:00-14:00</option>
            <option value="5">14:00-16:00</option>
            <option value="7">16:00-18:00</option>
            <option value="8">18:00-20:00</option>
            <option value="9">20:00-22:00</option>
            <option value="15">上午</option>
            <option value="16">下午</option>
            <option value="17">晚上</option>
          </select>
        </div>
        <div class="price">
          <div>
            <span>店铺价：</span>
            <span class="red">￥275</span>
          </div>
          <div>
            <span>市场价：</span>
            <span><s>￥{{scj}}</s></span>
            <span class="mr">销量{{dcount}}笔</span>
          </div>
        </div>
        <div class="btn">
          <div class="btn_l">
            <span>数量：</span>
            <span>
              <button @click="jian" :disabled="num" :class="num?'disabled':''">-</button>
              <input type="text" value="1" @input="value" id="inp">
              <button @click="jia">+</button>
            </span>
          </div>
          <div class="btn_r">
            <button @click="addToCar">加入购物车</button>
            <button>立即购买</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 详情内容 -->
    <div class="detail">
      <div class="l">
        <ul>
          <li>
            <div class="title"><img src="../assets/det_rx.png" alt=""></div>
            <div class="img"><a href="#"><img src="../assets/r_b1.jpeg" alt=""></a></div>
            <div class="price">
              <p>永恒回忆</p>
              <div>
                <span class="red">￥395</span>
                <span>销量27199笔</span>
              </div>
            </div>
          </li>
          <li v-for="i in 7" :key="i">
            <div class="img"><a href="#"><img src="../assets/r_b1.jpeg" alt=""></a></div>
            <div class="price">
              <p>永恒回忆</p>
              <div>
                <span class="red">￥395</span>
                <span>销量27199笔</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="r">
        <div class="r_t">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="产品详情" name="first">
              <div class="cp">
                <img src="../assets/details1.jpeg" width="647px" alt="">
                <img src="../assets/details2.jpeg" width="647px"  alt="">
                <img src="../assets/details3.jpeg" width="647px"  alt="">
              </div>
            </el-tab-pane>
            <el-tab-pane label="用户评价（1300）" name="second">
              <div class="pj">
                <div v-for="i in 20" :key="i">
                  <div>
                    <img src="../assets/pj_logo.png" alt="">
                  </div>
                  <div>
                    <p>147****2479</p>
                  </div>
                  <div>
                    <p>一大束玫瑰花，老婆非常喜欢。花也很新鲜，推荐大家买</p>
                  </div>
                  <div>
                    <img src="../assets/pj_t1.jpeg" alt="">
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="售后保障" name="third">
              <div class="sh">
                <img src="../assets/details_sh.jpeg" width="647px" alt="">
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <!-- 相似推荐 -->
    <div class="b">
          <div class="title">
            <img src="../assets/details_title.png" alt="">
          </div>
          <div class="xs">
            <ul class="flex">
              <li v-for="i in 3" :key="i">
                <div class="img"><a href="#"><img src="../assets/r_b1.jpeg" alt=""></a></div>
                <div class="price">
                  <p>永恒回忆</p>
                  <div>
                    <span class="red">￥395</span>
                    <span>销量27199笔</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
    </div>
  </div>
</template>

<script>
import router from '@/router';
import { mapMutations } from 'vuex';
  export default {
    data() {
      return {
        activeName: 'second',
        imgurl:'',
        did:'',
        data:'',
        dtitle:'',
        dcount:'',
        cl:'',
        bz:'',
        scj:'',
        num:true,
        jg:''
      };
    },
    mounted () {
      this.date();
      console.log(this.$route.query);
      // this.imgurl=this.$route.query.dimg.replace('%','/')
      let did=this.$route.query.did
      let data=this.$route.query.data
      this.axios.get(`/details/?did=${did}&data=${data}`).then(res=>{
        console.log(res);
        let jg=res.data.results[0]
        this.jg=res.data.results[0]
        this.imgurl=jg.dimg
        this.dtitle=jg.dtitle
        this.dcount=jg.dcount
        this.cl=jg.cl
        this.bz=jg.bz
        this.scj=jg.scj
      })
    },
    computed:{
      },
    methods: {
      ...mapMutations(['changeState']),
      addToCar(){
        this.changeState(this.jg)
        console.log(this.$store.state.carItems);
        // 弹框说添加成功
        this.$message({
          message: '加购成功！',
          type: 'success'
        });
        setTimeout(()=>{
          this.$router.replace({
            path:'/car',
            name:'Car'
          })
        },2000)
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      date(){
        let date = new Date()
        console.log(date.toLocaleDateString())
        let ndate=date.toLocaleDateString()
        return ndate
      },
      jian(){
        if(inp.value>1){
          inp.value--
        }else if(inp.value==1){
          this.num=true
        }
      },
      jia(){
        inp.value++
        this.num=false
      },
      value(){
        if(!/^[1-9]\d{0,9999}$/.test(inp.value)){
          inp.value=1
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container{
    background-color: #f2f2f2;
    padding: 15px 38px;
    .item{
      margin-top: 20px;
      background-color: #fff;
      display: flex;
      .left{
        width: 1200px;
        height: 533px;
        >div{
          overflow: hidden;
          border-radius: 10px;
        }
        img:hover{
            transform: scale(1.1);
            transition-delay: 100ms;
            transition-duration: 1000ms;
        }
        .l_t{
          width: 350px;
          margin: 20px 15px;
          img{
            width: 100%;
          }
        }
        .l_b{
          width: 400px;
          height: 83px;
          text-align: left;
          img{
            width: 20%;
            margin-left: 20px;
            border-radius: 10px;
          }
        }
      }
      .right{
        width: 670px;
        height: 511px;
        margin-left: -550px;
        >p{
          font-size: 20px;
          color: #333;
          font-weight: 600;
        }
        >hr{
          width: 500px;
          margin-left: -3px;
          color: #f2f2f2;
        }
        >div{
          color: #666;
          font-size: 14px;
          margin: 10px 0;
          span{
            margin-right: 20px;
          }
        }
        >div.mt{
          margin: 30px 0;
        }
        >div.mb{
          input,select{
            box-sizing: border-box;
            width: 140px;
            height: 30px;
            border: 1px solid #ccc;
            text-align: center;
          }
          select{
            margin-left: 10px;
            color: #666;
          }
        }
        >div.price{
          background-color: #f2f2f2;
          color: #666;
          box-sizing: border-box;
          width: 500px;
          margin-top: 20px;
          padding: 20px 0 20px 20px;
          div:first-child{
            margin-bottom: 10px;
          }
          span{
            color: #333;
            font-size: 16px;
          }
          .red{
            font-size: 20px;
            color: #f43;
          }
          .mr{
            float: right;
            margin-right: 20px;
          }
        }
        .btn{
          display: flex;
          .btn_l{
            span{
              display: inline-block;
              button{
                width: 31px;
                height: 32px;
                cursor: pointer;
                color: #999;
                border: 1px solid #ddd;
                background-color: #f5f5f5;
              }
              button.disabled{
                background-color: #fff;
                color: #000;
              }
              input{
                width: 40px;
                height: 28px;
                outline: none;
                border: 0;
                border-top:1px solid #ddd ;
                border-bottom:1px solid #ddd ;
                text-align: center;
              }
            }
          }
          .btn_r{
            margin-left: 100px;
            button{
              width: 100px;
              height: 40px;
              cursor: pointer;
            }
            button:first-child{
              border: 1px solid #804e22;
              color: #804e22;
              background-color: #fff;
            }
            button:last-child{
              border: 1px solid #804e22;
              margin-left: 10px;
              color: #fff;
              background-color: #804e22;
            }
          }
        }
      }
    }
    ul{
          margin: 0;
          padding: 0;
          li{
            background-color: #fff;
            >div{
              box-sizing: border-box;
              padding: 10px 10px;
            }
            div.title{
              border-bottom: 1px solid #ddd;
            }
            div.img{
              width: 237px;height: 237px;
              text-align: center;
              img{
                width: 100%;
              }
            }
            div.price{
              p{
                font-size: 15px;
                color: #666;
                margin: 0;
              }
              div{
                display: flex;
                justify-content: space-between;
              }
              span{
                font-size: 12px;
                color: #999;
                margin-right: 10px;
              }
              .red{
                font-size: 18px;
                color: #f43;
              }
            }
          }
    }
    ul.flex{
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .detail{
      margin-top: 20px;
      display: flex;
      .l{
        width: 250px;
      }
      .r{
        width: 930px;
        box-sizing: border-box;
        margin-left: 20px;
        padding: 10px;
        background-color: #fff;
        .r_t{
          .pj{
            >div{
              display: flex;
              padding: 30px 0 30px 30px;
              justify-content: space-around;
              align-items: center;
              border-bottom: 1px dashed #999;
              div:first-child{
                width: 40px;height: 40px;
                border-radius: 50%;
                overflow: hidden;
                border: 1px solid #804e22;
                >img{
                  width: 40px;
                }
              }
              div:nth-child(2){
                width: 120px;
                p{
                  font-size: 16px;
                  color: #333;
                }
              }
              div:nth-child(3){
                width: 320px;
                p{
                  font-size:15px ;
                  color: #666;
                }
              }
              div:last-child{
                width: 67px;
                height: 67px;
                border: 1px solid #804e22;
                >img{
                  width: 67px;
                  height: 67px;
                }
              }
            }
          }
        }
      }
    }
    .b{
      margin: 30px 0;
      >div:first-child{
        margin-left: 40%;
        margin-bottom: 20px;
      }
    }
  }
</style>